<template>
  <div class="mymenu">
    <ul>
      <li
        v-for="item in val"
        :key="item"
        :class="activeClass == item ? 'active' : ''"
        @mouseover="mouseover($event, item)"
      >
        <router-link to>
          <slot :name="item"></slot>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["val"],
  // name: "mymenu",
  data() {
    return {
      activeClass: 1,
    };
  },
  methods: {
    mouseover(e, val) {
      this.activeClass = val;
    },
  },
  watch: {
    activeClass: function (val) {
      this.$emit("fromChild", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.mymenu {
  ul {
    li {
      float: left;
      margin-left: 30px;
      a {
        color: #424242;
      }
      a:hover {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
      }
    }
    .active {
      a {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
      }
    }
  }
}
</style>
